@extends('layouts.back_stage')
@section('content')
    <style>
        .shopBg{background:#fff;overflow: hidden;margin:20px 0 10px 0;}
        .tableBg{padding:30px;background:#fff;margin-top:30px;overflow: hidden;}
        .tleBg{padding:10px;background:#fff;margin-top:10px;width:49%;float:right;}
        .input-item{width:400px;padding-right: 0;margin-right:10px;}
        .el-table tr:hover>td{background:initial !important;}
        .el-table tr.current-row>td{background:initial !important;}
        .el-table .bgBlue {background: #1aad1a;color:#fff;}
        ::-webkit-scrollbar {height: 8px;}
        .el-table__footer-wrapper tbody td, .el-table__header-wrapper tbody td{color:red;}
        .el-table .bgGreen{background:#1aad1a;color:#fff;}
        .pagination-box{text-align: center;box-sizing:border-box;margin-top:20px;}
        .el-select .el-input .el-select__caret.el-input__icon{line-height:22px;}
        [v-cloak] {display: none;}
    </style>
    <div class="container">
        <div style="padding:20px 20px 20px 0;overflow:hidden;"><h3 style="float:left;">扫码制单退货详情</h3></div>
        <!-- 主体-->
        <div class="page-body">
            <audio id="music_success" src="{{env('CDN_DOMAIN_NAME')}}/store/mp3/success.mp3" type="audio/mp3"></audio>
            <audio id="music_faile" src="{{env('CDN_DOMAIN_NAME')}}/store/mp3/faile.mp3" type="audio/mp3"></audio>
            <div class="row app" id="guanLi" v-loading="loading" v-cloak>
                <div class="col-md-12 row row-table-box">
                    <div class="shopBg" v-show="showBg">
                        <div class="row" style="margin-top:10px;padding:29px 30px;background:#fff;">
                            <div v-show="codeShow" style="display: inline-block;">
                                <label>条码：</label>
                                <el-input v-model.trim="small_qr" class="input-item" placeholder="请扫码或输入条码" size="small" clearable></el-input>
                                <el-button type="primary" size="small" @click="sureCode">确定</el-button>
                            </div>
                            <el-button type="primary" size="small" @click="overBtn">退货完成</el-button>
                            <el-button type="primary" size="small" @click="openBtn" v-show="openShow">开启校验</el-button>
                        </div>
                    </div>
                    <div class="shopBg" style="min-height:60px;line-height:60px;">
                        <span style="margin:0 40px;display:inline-block;">单据号：@{{ order_num }}</span>
                        <span style="margin:0 40px;display:inline-block;">退货仓库：@{{ fact_type }}</span>
                        <span style="margin:0 40px;display:inline-block;">销售季节：@{{ season }}</span>
                        <span style="margin:0 40px;display:inline-block;">客户：@{{ customer_name }}</span>
                        <span style="margin:0 40px;display:inline-block;">备注：@{{ remark }}</span>
                    </div>
                    <div class="tableBg">
                        <el-table :data="thTist" size="mini" border @filter-change="filterChange1" :row-class-name="tableRowClassName">
                            <el-table-column prop="is_scan" label="状态" width="60" :resizable='false' column-key="is_scan" :filters="isScan">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.is_scan===0">-</span>
                                    <span v-if="scope.row.is_scan===1">未校验</span>
                                    <span v-if="scope.row.is_scan===2">已校验</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="code" label="条码" min-width="170" :resizable='false'></el-table-column>
                            <el-table-column prop="brand" label="品牌" min-width="100" :resizable='false'></el-table-column>
                            <el-table-column prop="year" label="年份" width="50" :resizable='false'></el-table-column>
                            <el-table-column prop="season" label="季节" width="50" :resizable='false'></el-table-column>
                            <el-table-column prop="girard" label="款号" width="110" :resizable='false'></el-table-column>
                            <el-table-column prop="cate_3" min-width="100" label="小类" :resizable='false'></el-table-column>
                            <el-table-column prop="color" width="80" label="颜色" :resizable='false'></el-table-column>
                            <el-table-column prop="size" width="50" label="尺码" :resizable='false'></el-table-column>
                            <el-table-column prop="price" width="100" label="吊牌价/元" align="right" :resizable='false'></el-table-column>
                            <el-table-column prop="scan_admin" width="80" label="扫描人" :resizable='false'></el-table-column>
                            <el-table-column prop="created_at" width="160" label="扫描时间" :resizable='false'></el-table-column>
                            <el-table-column prop="check_admin" width="80" label="校验人" :resizable='false'></el-table-column>
                            <el-table-column prop="updated_at" width="160" label="校验时间" :resizable='false'></el-table-column>
                        </el-table>
                        <div class="pagination-box"><el-pagination @size-change="handleSizeChange" :page-sizes="[10,50,100,200]" :page-size="10" @current-change="changePageSkip" :current-page.sync="currentPage" :total="total" layout="sizes,prev, pager, next" background></el-pagination></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /主体-->
    </div>

    <script>
        new Vue({
            el: '#guanLi',
            data:{
                thTist:[],//单据清单
                total:1,  //table总条数
                currentPage:1, //table当前页数
                page:10,//每页多少条
                thSist:[],//退货
                small_qr:'',//条码

                order_num:'',//单据号
                fact_type:'',//发货仓库
                season:'',//销售季节
                customer_name:'',//客户
                remark:'',//备注
                loading:false,
                showBg:true,
                codeShow:true,
                isScan:[],
                is_scan:'',
                openShow:true,

                overBtnFlag:true,
                openBtnFlag:true,
            },
            created(){
                this.loading=true;
            },
            mounted(){
                this.grabble();
            },
            methods:{
                //左边数据
                grabble(type){
                    var that = this;
                    let skip;
                    if(type == 'reset'){
                        skip = 0;
                    }else{
                        skip = that.currentPage-1;
                    }
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                        },
                        type: 'post',
                        url: '/distribution/code-group-info',
                        data: {
                            id:'{{$id}}',
                            skip:skip,
                            page:that.page,
                            pageType:1,
                            is_scan:that.is_scan,
                        },
                        success: function (data) {
                            console.log(data);
                            if(data.result.success){
                                var state=window.location.href.split("=")[1];
                                if(data.content.is_check==1){
                                    that.codeShow=true;
                                    that.openShow=false;
                                    if(state==1){
                                        that.showBg=false;
                                    }
                                }else if(data.content.is_check==0){
                                    that.codeShow=false;
                                    that.openShow=true;
                                    if(state==1){
                                        that.showBg=false;
                                    }
                                }
                                that.isScan=data.content.is_scan;
                                that.order_num=data.content.head.order_num;
                                that.fact_type=data.content.head.fact_type;
                                that.season=data.content.head.season;
                                that.customer_name=data.content.head.customer_name;
                                that.remark=data.content.head.remark;
                                that.thTist = data.content.data;
                                that.currentPage = parseFloat( data.content.skip );
                                that.total = data.content.total;
                                that.loading=false;
                            }else{
                                that.$notify({
                                    title: '提示',
                                    message: data.result.errorMsg,
                                    duration: 0
                                });
                            }
                        }
                    });
                },
                //确定扫码
                sureCode(){
                    var that=this;
                    if (this.small_qr != '') {
                        $.ajax({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                            },
                            type: 'post',
                            url: '/distribution/return-order-scan-code',
                            data: {
                                id:'{{$id}}',
                                code:this.small_qr
                            },
                            success: function (data) {
                                if(data.result.success){
                                    that.small_qr='';
                                    that.grabble();
                                    var music = document.getElementById("music_success");
                                    music.play();
                                    that.$notify.success({
                                        title: '提示',
                                        message: "扫码成功"
                                    });
                                }else{
                                    var music = document.getElementById("music_faile");
                                    music.play();
                                    that.$notify.error({
                                        title: '错误',
                                        message: data.result.errorMsg
                                    });
                                }
                            }
                        })
                    }
                },
                /*退货完成*/
                overBtn(){
                    var that=this;
                    const h = this.$createElement;
                    this.$msgbox({
                        title: '提示',
                        message: h('p', null, [
                            h('span', null, '是否确认完成退货?'),
                        ]),
                        showCancelButton: true,
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                        beforeClose: (action, instance, done) => {
                            if (action === 'confirm') {
                                if(that.overBtnFlag==true){
                                    that.overBtnFlag=false;
                                    $.ajax({
                                        headers: {
                                            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                                        },
                                        type: 'post',
                                        url: '/distribution/return-order-finish',
                                        data: {
                                            id:'{{$id}}'
                                        },
                                        success: function (data) {
                                            //console.log(data);
                                            if(data.result.success){
                                                that.$notify.success({
                                                    title: '提示',
                                                    message: "配货完成"
                                                });
                                                done();
                                                that.overBtnFlag=true;
                                                setTimeout(function () {
                                                    window.location.href='/distribution/pfthd-warehouse-list';
                                                },1000)
                                            }else{
                                                that.$notify.error({
                                                    title: '错误',
                                                    message: data.result.errorMsg
                                                });
                                                that.overBtnFlag=true;
                                            }
                                        }
                                    })
                                }
                            } else {
                                done();
                            }
                        }
                    }).then(action => {

                    });
                },
                /*状态搜索*/
                filterChange1(filters){
                    var fil=filters.is_scan;
                    var stas='';
                    for(var d=0;d<fil.length; d++){
                        stas=stas+fil[d]+',';
                    }
                    this.is_scan=stas.substr(0, stas.length - 1);
                    this.grabble('reset');
                },
                /*开启校验*/
                openBtn(){
                    var that=this;
                    const h = this.$createElement;
                    this.$msgbox({
                        title: '提示',
                        message: h('p', null, [
                            h('span', null, '是否开启校验?'),
                        ]),
                        showCancelButton: true,
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                        beforeClose: (action, instance, done) => {
                            if (action === 'confirm') {
                                if(that.openBtnFlag==true){
                                    that.openBtnFlag=false;
                                    $.ajax({
                                        headers: {
                                            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                                        },
                                        type: 'post',
                                        url: '/distribution/return-order-recheck',
                                        data: {
                                            id:'{{$id}}'
                                        },
                                        success: function (data) {
                                            //console.log(data);
                                            if(data.result.success){
                                                that.$notify.success({
                                                    title: '提示',
                                                    message: "开启成功，请扫码校验"
                                                });
                                                done();
                                                that.openShow=false;
                                                that.codeShow=true;
                                                that.grabble('reset');
                                                that.openBtnFlag=true;
                                            }else{
                                                that.$notify.error({
                                                    title: '错误',
                                                    message: data.result.errorMsg
                                                });
                                                that.openBtnFlag=true;
                                            }
                                        }
                                    })
                                }
                            } else {
                                done();
                            }
                        }
                    }).then(action => {

                    });
                },
                /*背景颜色*/
                tableRowClassName({row, rowIndex}){
                    if(row.is_scan == 2){
                        return "bgGreen"
                    }else {
                        return ""
                    }
                },
                changePageSkip(val){
                    //console.log(`当前页: ${val}`);
                    this.currentPage = val;
                    this.grabble();
                },
                handleSizeChange(val) {
                    this.page=val;
                    this.grabble('reset');
                    //console.log(`每页 ${val} 条`);
                },
            },
            watch : {
                small_qr:function(val) {
                    this.small_qr = val;
                    var that=this;
                    if (this.small_qr != '' && this.small_qr.length==15) {
                        $.ajax({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                            },
                            type: 'post',
                            url: '/distribution/return-order-scan-code',
                            data: {
                                id:'{{$id}}',
                                code:this.small_qr
                            },
                            success: function (data) {
                                if(data.result.success){
                                    console.log(data);
                                    that.small_qr='';
                                    that.grabble();
                                    var music = document.getElementById("music_success");
                                    music.play();
                                    that.$notify.success({
                                        title: '提示',
                                        message: "扫码成功"
                                    });
                                }else{
                                    var music = document.getElementById("music_faile");
                                    music.play();
                                    that.$notify.error({
                                        title: '错误',
                                        message: data.result.errorMsg
                                    });
                                }
                            }
                        })
                    }
                },
            }
        });
    </script>
@endsection